<template>
  <div class="app-container">
    <el-form ref="dataForm" :rules="modelRules" :model="model" label-width="150px">
      <el-form-item label="域名或IP" prop="ip">
        <div v-if="!isEdit" class="static-text">{{ model.ip }}</div>
        <el-input v-if="isEdit" v-model="model.ip" placeholder="域名或IP"/>
      </el-form-item>
      <el-form-item label="端口" prop="port">
        <div v-if="!isEdit" class="static-text">{{ model.port || '无' }}</div>
        <el-input v-if="isEdit" v-model="model.port" placeholder="端口"/>
      </el-form-item>
      <el-form-item label="用户名" prop="username">
        <div v-if="!isEdit" class="static-text">{{ model.username }}</div>
        <el-input v-if="isEdit" v-model="model.username" placeholder="用户名"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <div v-if="!isEdit" class="static-text">******</div>
        <el-input v-if="isEdit" v-model="model.password" placeholder="密码" type="password"/>
      </el-form-item>
      <el-form-item label="实时数据接口" prop="dataAPI">
        <div v-if="!isEdit" class="static-text">{{ model.dataAPI }}</div>
        <el-input v-if="isEdit" v-model="model.dataAPI" placeholder="实时数据接口"/>
      </el-form-item>
      <el-form-item label="实时告警接口" prop="alarmAPI">
        <div v-if="!isEdit" class="static-text">{{ model.alarmAPI }}</div>
        <el-input v-if="isEdit" v-model="model.alarmAPI" placeholder="实时告警接口"/>
      </el-form-item>
      <el-form-item label="阈值配置接口" prop="metadatadAPI">
        <div v-if="!isEdit" class="static-text">{{ model.metadatadAPI }}</div>
        <el-input v-if="isEdit" v-model="model.metadatadAPI" placeholder="阈值配置接口"/>
      </el-form-item>
      <el-form-item label="转发数据" prop="requireData">
        <div v-if="!isEdit" class="static-text">{{ model.requireData?'是':'否' }}</div>
        <el-switch v-if="isEdit" v-model="model.requireData"></el-switch>
      </el-form-item>
      <el-form-item label="转发告警" prop="requireAlarm">
        <div v-if="!isEdit" class="static-text">{{ model.requireAlarm?'是':'否' }}</div>
        <el-switch v-if="isEdit" v-model="model.requireAlarm"></el-switch>
      </el-form-item>
      <el-form-item label="转发阈值" prop="requireThreshold">
        <div v-if="!isEdit" class="static-text">{{ model.requireThreshold?'是':'否' }}</div>
        <el-switch v-if="isEdit" v-model="model.requireThreshold"></el-switch>
      </el-form-item>
      <el-form-item>
        <el-button v-permission="['Admin.Transpond.Update']" v-if="!isEdit" type="primary" @click="isEdit= !isEdit">编辑</el-button>
        <el-button v-permission="['Admin.Transpond.Update']" v-if="isEdit" type="default" @click="cancel">取消</el-button>
        <el-button v-permission="['Admin.Transpond.Update']" v-if="isEdit" :loading="isSubmitLoading" type="primary" @click="updateDataCenter">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {getDataCenter, updateDataCenter} from "@/api/dataCenter";
  import pattern from "@/utils/pattern.js";

  export default {
    data() {
      return {
        isSubmitLoading: false,
        model: {
          requireData: true,
          requireAlarm: true,
          requireThreshold: true,
          dataAPI: '/data/realtime',
          alarmAPI: '/data/realtime',
          metadatadAPI: '/data/metadata'
        },
        isEdit: false,
        modelRules: {
          ip: [
            { required: true, trigger: "blur", message: "请输入域名或IP" }
            // { pattern: pattern.ip, message: "请输入正确的域名或IP" }
          ],
          port: [
            { required: true, trigger: "blur", message: "请输入端口" },
            {
              pattern: pattern.rule02,
              trigger: "blur",
              message: "请输入正确的端口"
            }
          ],
          username: [{ required: true, trigger: "blur", message: "请输入用户名" }],
          password: [{ required: true, trigger: "blur", message: "请输入密码" }],
          dataAPI: [{ required: true, trigger: "blur", message: "请输入实时数据接口" }],
          alarmAPI: [{ required: true, trigger: "blur", message: "请输入实时告警接口" }],
          metadatadAPI: [{ required: true, trigger: "blur", message: "请输入阈值配置接口" }]
        }
      };
    },
    computed: {},
    created() {
      this.getDataCenter();
    },
    methods: {
      getDataCenter() {
        getDataCenter().then(result => {
          this.model = result;
        });
      },
      cancel() {
        this.isEdit = false;
        this.$nextTick(() => {
          this.$refs["dataForm"].clearValidate();
        });
        this.getDataCenter();
      },
      updateDataCenter() {
        this.isSubmitLoading = true;
        this.$refs["dataForm"].validate(valid => {
          if (valid) {
            updateDataCenter(this.model)
              .then(() => {
                this.$message({
                  message: "编辑成功",
                  type: "success"
                });
                this.getDataCenter();
                this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
                this.isEdit = false;
              })
              .catch(() => {
                this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
              });
          } else {
            this.isSubmitLoading = false;
            this.$message({
              message: this.$t("formIsNotValidMessage"),
              type: "warning"
            });
          }
        });
      }
    }
  };
</script>

<style lang="scss">
  .el-cascader {
    display: block;
    max-width: 400px;
  }

  .el-input {
    max-width: 400px;
  }
</style>
